<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.title"
        placeholder="科室名称、科室编号"
        style="width: 200px;"
        class="filter-item"
      />
      <el-button class="filter-item" type="primary" icon="el-icon-search">查询</el-button>
    </div>

    <div>
      <h3>科室管理#</h3>
    </div>

    <el-dialog :title="title" class="dialogAdd" width="600px" :visible.sync="dialogAddgsVisible">
      <el-form
        :model="addForm"
        ref="addForm"
        style="margin-right: 20px;"
        label-position="right"
        label-width="110px"
      >
        <el-form-item label="科室名称:" prop="name">
          <el-input placeholder="请输入科室名称" v-model="addForm.department"></el-input>
        </el-form-item>
        <el-form-item label="科室编号:" prop="creditCode">
          <el-input placeholder="请输入科室编号" v-model="addForm.deptCode"></el-input>
        </el-form-item>
        <el-form-item label="科室描述:" prop="address">
          <el-input placeholder="请输入科室描述" v-model="addForm.remark"></el-input>
        </el-form-item>
        <el-form-item label="启用:" prop="available">
          <el-switch v-model="addForm.available" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogAddgsVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="saveAddDept">确 定</el-button>
      </div>
    </el-dialog>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="全选" prop="id" align="center" width="100">
        <label style="padding-right: 10px;font-size: 15px;font-weight: 500;">
          <input name="Fruit" type="checkbox" value />
        </label>
      </el-table-column>
      <el-table-column label="科室名称" prop="department" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{row.department}}</span>
        </template>
      </el-table-column>
      <el-table-column label="科室编号" prop="deptCode" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{row.deptCode}}</span>
        </template>
      </el-table-column>

      <el-table-column label="科室描述" prop="remark" align="center" width="150">
        <template slot-scope="{row}">
          <span>{{row.remark}}</span>
        </template>
      </el-table-column>

      <el-table-column label="科室状态" prop="available" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{row.available}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" prop="id" align="center" width="150">
        <template slot-scope="{row}">
          <el-button
            type="primary"
            size="mini"
            @click="DeptDelete"
            v-if="hasPermission('sys:dept:del')"
          >删除</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="DeptUpdate(row)"
            v-if="hasPermission('sys:dept:edit')"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-button type="primary" size="mini" style="margin-top: 15px;" @click="addDept">
      <span>新增科室</span>
    </el-button>
  </div>
</template>

<script>
import { getDept, saveOrUpdateDept } from "@/api/dept";

export default {
  name: "department",
  data() {
    return {
      tableKey: 0,
      listLoading: true,
      list: null,
      driver: null,
      total: 0,
      listQuery: {
        page: 1,
        pageSize: 20
      },

      addForm: {
        name: "",
        creditCode: "",
        address: "",
        tel: "",
        id: ""
      },
      dialogAddgsVisible: false,
      title: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    addDept() {
      {
        this.dialogAddgsVisible = true;
        this.title = "新增科室";
        this.addForm = {};
      }
    },
    saveAddDept() {
      console.log(this.addForm);
      saveOrUpdateDept(this.addForm).then(data => {
        if (data.code == 200) {
          this.$message("操作成功");
          this.getList();
          this.dialogAddgsVisible = false;
        } else {
          this.$message({
            message: "操作失败，请重试！",
            type: "warning"
          });
        }
      });
    },

    getList() {
      this.listLoading = true;
      getDept(this.listQuery).then(response => {
        this.list = response.page.list;
        this.total = response.page.totalCount;

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 0.5 * 1000);
      });
    },
    DeptDelete() {
      alert("删除科室");
    },
    DeptUpdate(row) {
      this.dialogAddgsVisible = true;
      this.title = "修改科室";
      this.addForm = row;
    }
  }
};
</script>

<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
</style>

<style scoped>
.icon-star {
  margin-right: 2px;
}

.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.show-d {
  margin-top: 15px;
}
</style>
